<template>
  <view class="login-container">
    <!-- 背景装饰 - 微信小程序兼容版本 -->
    <view class="bg-decoration">
      <!-- 渐变圆圈装饰 -->
      <view class="bg-circle circle-1"></view>
      <view class="bg-circle circle-2"></view>
      <view class="bg-circle circle-3"></view>
      <view class="bg-circle circle-4"></view>
      
      <!-- 医疗主题图标装饰 -->
      <view class="medical-icon icon-1">
        <uni-icons type="heart-filled" size="30" color="rgba(255,255,255,0.3)"></uni-icons>
      </view>
      <view class="medical-icon icon-2">
        <uni-icons type="plus-filled" size="35" color="rgba(255,255,255,0.25)"></uni-icons>
      </view>
      <view class="medical-icon icon-3">
        <uni-icons type="gear-filled" size="25" color="rgba(255,255,255,0.2)"></uni-icons>
      </view>
      
      <!-- 装饰性几何图形 -->
      <view class="geometric-shape shape-1"></view>
      <view class="geometric-shape shape-2"></view>
      <view class="geometric-shape shape-3"></view>
    </view>
    
    <!-- 顶部Logo区域 -->
    <view class="logo-section">
      <view class="logo-wrapper">
        <view class="logo-bg">
          <uni-icons type="heart-filled" size="40" color="#667eea"></uni-icons>
        </view>
      </view>
    </view>
    
    <!-- 登录方式切换 -->
    <view class="login-type-switch">
      <view class="switch-wrapper">
        <view 
          class="switch-item" 
          :class="{ active: loginType === 'wechat' }"
          @click="switchLoginType('wechat')"
        >
          <uni-icons type="weixin" size="20" :color="loginType === 'wechat' ? '#000' : '#000'"></uni-icons>
          <text class="switch-text">微信登录</text>
        </view>
        <view 
          class="switch-item" 
          :class="{ active: loginType === 'phone' }"
          @click="switchLoginType('phone')"
        >
          <uni-icons type="mobile" size="20" :color="loginType === 'phone' ? '#000' : '#000'"></uni-icons>
          <text class="switch-text">手机号登录</text>
        </view>
        <view 
          class="switch-item" 
          :class="{ active: loginType === 'password' }"
          @click="switchLoginType('password')"
        >
          <uni-icons type="locked" size="20" :color="loginType === 'password' ? '#000' : '#000'"></uni-icons>
          <text class="switch-text">密码登录</text>
        </view>
      </view>
    </view>
    
    <!-- 微信登录卡片 -->
    <view class="form-card" v-if="loginType === 'wechat'">
      <view class="wechat-login-content">
        <view class="wechat-icon">
          <uni-icons type="weixin" size="80" color="#1aad19"></uni-icons>
        </view>
        <view class="wechat-title">微信快捷登录</view>
        <view class="wechat-desc">使用微信账号快速登录，安全便捷</view>
        
        <!-- 微信登录按钮 -->
        <view class="wechat-btn-wrapper">
          <button @click="handleWechatLogin" class="wechat-login-btn" hover-class="wechat-btn-hover" :disabled="isLogging">
            <uni-icons type="weixin" size="24" color="#000"></uni-icons>
            <text class="btn-text">{{ isLogging ? '登录中...' : '微信登录' }}</text>
          </button>
        </view>
      </view>
    </view>
    
    <!-- 手机号登录表单卡片 -->
    <view class="form-card" v-if="loginType === 'phone'">
      <view class="form-content">
        <!-- 手机号输入框 -->
        <view class="input-group">
          <view class="input-wrapper">
            <view class="input-icon">
              <uni-icons type="mobile" size="20" color="#999"></uni-icons>
            </view>
            <input 
              v-model="phoneForm.phone" 
              class="form-input" 
              type="number" 
              placeholder="请输入手机号" 
              placeholder-class="input-placeholder"
              maxlength="11" 
            />
          </view>
        </view>

        <!-- 验证码输入框 -->
        <view class="input-group">
          <view class="input-wrapper captcha-wrapper">
            <view class="input-icon">
              <uni-icons type="code-box" size="20" color="#999"></uni-icons>
            </view>
            <input 
              v-model="phoneForm.smsCode" 
              class="form-input captcha-input" 
              type="number" 
              placeholder="请输入验证码" 
              placeholder-class="input-placeholder"
              maxlength="6" 
            />
            <view class="captcha-code" @click="getPhoneCode" :class="{ disabled: countDown > 0 }">{{ countDown > 0 ? `${countDown}秒` : '获取验证码' }}</view>
          </view>
        </view>
        
        <!-- 图片验证码输入框 -->
        <view class="input-group" v-if="captchaEnabled">
          <view class="input-wrapper captcha-wrapper">
            <view class="input-icon">
              <uni-icons type="checkmarkempty" size="20" color="#999"></uni-icons>
            </view>
            <input 
              v-model="phoneForm.imgCode" 
              class="form-input captcha-input" 
              type="number" 
              placeholder="请输入图片验证码" 
              placeholder-class="input-placeholder"
              maxlength="4" 
            />
            <view class="captcha-code" @click="getPhoneImgCode">
              <image v-if="phoneForm.imgCodeUrl" :src="phoneForm.imgCodeUrl" class="captcha-img"></image>
              <view v-else class="captcha-placeholder">点击获取</view>
            </view>
          </view>
        </view>

        <!-- 登录按钮 -->
        <view class="login-btn-wrapper">
          <button @click="handlePhoneLogin" class="login-btn" hover-class="login-btn-hover">
            <text class="btn-text">登录</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 密码登录表单卡片 -->
    <view class="form-card" v-if="loginType === 'password'">
      <view class="form-content">
        <!-- 用户名输入框 -->
        <view class="input-group">
          <view class="input-wrapper">
            <view class="input-icon">
              <uni-icons type="person" size="20" color="#999"></uni-icons>
            </view>
            <input 
              v-model="loginForm.username" 
              class="form-input" 
              type="text" 
              placeholder="请输入用户名" 
              placeholder-class="input-placeholder"
              maxlength="30" 
            />
          </view>
        </view>
        
        <!-- 密码输入框 -->
        <view class="input-group">
          <view class="input-wrapper">
            <view class="input-icon">
              <uni-icons type="locked" size="20" color="#999"></uni-icons>
            </view>
            <input 
              v-model="loginForm.password" 
              class="form-input" 
              :type="showPassword ? 'text' : 'password'" 
              placeholder="请输入密码" 
              placeholder-class="input-placeholder"
              maxlength="20" 
            />
            <view class="password-toggle" @click="togglePassword">
              <uni-icons :type="showPassword ? 'eye-slash' : 'eye'" size="20" color="#999"></uni-icons>
            </view>
          </view>
        </view>
        
        <!-- 验证码输入框 -->
        <!-- 验证码输入框 -->
        <view class="input-group" v-if="captchaEnabled && loginType === 'password'">
          <view class="input-wrapper captcha-wrapper">
            <view class="input-icon">
              <uni-icons type="checkmarkempty" size="20" color="#999"></uni-icons>
            </view>
            <input 
              v-model="loginForm.code" 
              class="form-input captcha-input" 
              type="number" 
              placeholder="请输入验证码" 
              placeholder-class="input-placeholder"
              maxlength="4" 
            />
            <view class="captcha-code" @click="getCode">
              <image v-if="codeUrl" :src="codeUrl" class="captcha-img"></image>
              <view v-else class="captcha-placeholder">点击获取</view>
            </view>
          </view>
        </view>
        
        <!-- 登录按钮 -->
        <view class="login-btn-wrapper">
          <button @click="handleLogin" class="login-btn" hover-class="login-btn-hover">
            <text class="btn-text">登录</text>
          </button>
        </view>
        
        <!-- 忘记密码和注册 -->
        <view class="form-footer">
          <text class="forgot-password" @click="handleForgotPassword">忘记密码</text>
          <view class="register-section" v-if="register">
            <text class="register-text">暂无账号？</text>
            <text class="register-link" @click="handleUserRegister">立即注册</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 协议条款 -->
    <view class="agreement">
      <view class="agreement-checkbox" @click="toggleAgreement">
        <uni-icons 
          :type="checked ? 'checkbox-filled' : 'checkbox'" 
          size="16" 
          :color="checked ? '#000' : '#000'"
        ></uni-icons>
        <text class="agreement-text">我已阅读并同意</text>
      </view>
      <view class="agreement-links">
        <text class="agreement-link" @click="handleUserAgrement">《用户协议》</text>
        <text class="agreement-link" @click="handlePrivacy">《隐私协议》</text>
      </view>
    </view>
  </view>
</template>

<script>
  import { getCodeImg, phoneLogin, weixinLogin, sendCode } from '@/api/login'
	import { getToken, setToken } from '@/utils/auth'

  export default {
    data() {
      return {
        loginType: 'wechat', // 默认微信登录
        codeUrl: "",
        captchaEnabled: true,
        showPassword: false,
        register: false,
        checked: false, // 协议勾选状态
        isLogging: false, // 登录状态
        globalConfig: getApp().globalData.config,
        loginForm: {
          username: "张三",
          password: "123",
          code: "",
          uuid: "",
          loginType: 1
        },
        phoneForm: {
          phone: '',
          smsCode: '',
          imgCode: '',
          imgCodeUrl: '',
		  loginType: 2
        },
        countDown: 0, // 验证码倒计时
        timer: null // 计时器
      }
    },
    created() {
      // 移除自动获取验证码的逻辑
      // 只有在密码登录模式下才获取验证码
      // if (this.loginType === 'password') {
      //   this.getCode()
      // }
    },
    onLoad() {
        //#ifdef H5
        if (getToken()) {
          this.$tab.reLaunch('/pages/index')
        }
        //#endif
      },
      
      beforeDestroy() {
        // 组件销毁时清除计时器
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
      },
    methods: {
      // 切换登录方式
      // 切换登录方式
      switchLoginType(type) {
        this.loginType = type
        // 清除倒计时
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
          this.countDown = 0
        }
        // 微信登录模式下清空验证码
        if (type === 'wechat') {
          this.codeUrl = ''
          this.loginForm.code = ''
          this.loginForm.uuid = ''
        } else if (type === 'phone') {
          this.phoneForm = {
            phone: '',
            smsCode: '',
            imgCode: '',
            imgCodeUrl: '',
            uuid: '',
            loginType: 2
          }
        }
      },
      
      // 获取手机验证码
      async getPhoneCode() {
        if (this.countDown > 0) return
        
        const phone = this.phoneForm.phone
        if (!phone) {
          this.$modal.msgError('请输入手机号')
          return
        }
        
        if (!/^1[3-9]\d{9}$/.test(phone)) {
          this.$modal.msgError('请输入正确的手机号')
          return
        }
        
        // 移除图片验证码检查逻辑
        
        try {
          // 调用发送验证码的API
          const response = await sendCode(phone)
          
          if (response && response.code === 200) {
            // 发送验证码成功，开始倒计时
            this.countDown = 60
            this.timer = setInterval(() => {
              this.countDown--
              if (this.countDown <= 0) {
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
            
            uni.showToast({
              title: '验证码已发送',
              icon: 'success',
              duration: 2000
            })
          } else {
            throw new Error(response.msg || '发送验证码失败')
          }
        } catch (error) {
          console.error('发送验证码失败:', error)
          uni.showToast({
            title: error.message || '发送验证码失败，请重试',
            icon: 'none',
            duration: 2000
          })
        }
      },
      
      // 获取手机号登录图片验证码
      getPhoneImgCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.phoneForm.imgCodeUrl = 'data:image/gif;base64,' + res.img
            this.phoneForm.uuid = res.uuid
          } else {
            console.log('验证码功能已禁用')
          }
        }).catch(error => {
          console.error('获取验证码失败:', error)
          // 移除弹框提示，静默处理失败
          // 获取失败时保持按钮可见，用户可以重试
          if (!this.phoneForm.imgCodeUrl) {
            this.phoneForm.imgCodeUrl = null // 保持按钮显示但不显示图片
          }
          // 保持 captchaEnabled 为 true，确保验证码区域仍然显示
          this.captchaEnabled = true
        })
      },
      
      // 手机号登录
      async handlePhoneLogin() {
        if (!this.checked) {
          uni.showToast({
            title: '请先同意协议',
            icon: 'none'
          })
          return
        }
        
        const { phone, smsCode, imgCode, uuid } = this.phoneForm
        
        if (!phone) {
          this.$modal.msgError('请输入手机号')
          return
        }
        
        if (!/^1[3-9]\d{9}$/.test(phone)) {
          this.$modal.msgError('请输入正确的手机号')
          return
        }
        
        if (this.captchaEnabled && !imgCode) {
          this.$modal.msgError('请输入图片验证码')
          return
        }
        
        if (!smsCode) {
          this.$modal.msgError('请输入验证码')
          return
        }
        
        if (this.isLogging) return
        
        this.isLogging = true
        uni.showLoading({
          title: '登录中...'
        })
        
        try {
          // 调用手机号登录API
          const response = await phoneLogin(phone, smsCode, imgCode, 2)
          console.log(response)
          if (response && response.code === 200) {
            //登录成功，获取token
            const token = response.data.access_token
            setToken(token)
            // 更新store中的token
            this.$store.commit('SET_TOKEN', token)
            
            uni.hideLoading()
            uni.showToast({
              title: '登录成功',
              icon: 'success',
              duration: 1500
            })
            
            setTimeout(() => {
              this.loginSuccess()
            }, 1500)
          } else {
            throw new Error(response.msg || '登录失败')
          }
        } catch (error) {
          console.error('手机号登录失败:', error)
          uni.hideLoading()
          uni.showToast({
            title: error.message || '登录失败，请重试',
            icon: 'none',
            duration: 2000
          })
          
          // 登录失败时重新获取图片验证码
          if (this.captchaEnabled) {
            this.getPhoneImgCode()
          }
        } finally {
          this.isLogging = false
        }
      },
      
      // 切换协议勾选状态
      toggleAgreement() {
        this.checked = !this.checked
      },
      
      // 切换密码显示状态
      togglePassword() {
        this.showPassword = !this.showPassword
      },
      
      // 忘记密码
      handleForgotPassword() {
        this.$modal.msg('忘记密码功能开发中...')
      },
      
      // 微信登录方法
      async handleWechatLogin() {
        if (!this.checked) {
          uni.showToast({
            title: '请先同意协议',
            icon: 'none'
          })
          return
        }

        if (this.isLogging) return

        this.isLogging = true
        uni.showLoading({
          title: '登录中...'
        })

        try {
          // 1. 调用wx.login获取code
          const loginRes = await this.wxLogin()

          if (!loginRes.code) {
            throw new Error('获取微信登录code失败')
          }
          
          // 2. 调用微信登录接口
          const response = await weixinLogin(loginRes.code)

          if (response && response.code === 200) {
            // 3. 保存token
            const token = response.data.access_token
            setToken(token)
            uni.setStorageSync('token', token)

            // 4. 登录成功提示
            uni.hideLoading()
            uni.showToast({
              title: '登录成功',
              icon: 'success',
              duration: 1500
            })

            // 5. 延迟跳转首页
            setTimeout(() => {
              this.loginSuccess()
            }, 1500)

          } else {
            throw new Error(response.msg || '登录失败')
          }

        } catch (error) {
          console.error('微信登录失败:', error)
          uni.hideLoading()
          uni.showToast({
            title: error.message || '登录失败，请重试',
            icon: 'none',
            duration: 2000
          })
        } finally {
          this.isLogging = false
        }
      },
      
      // 微信登录获取code
      wxLogin() {
        return new Promise((resolve, reject) => {
          uni.login({
            provider: 'weixin',
            success: (res) => {
              resolve(res)
            },
            fail: (err) => {
              reject(err)
            }
          })
        })
      },
      
      // 用户注册
      handleUserRegister() {
        this.$tab.redirectTo(`/pages/register`)
      },
      
      // 隐私协议
      handlePrivacy() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      
      // 获取图形验证码
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.loginForm.uuid = res.uuid
          } else {
            console.log('验证码功能已禁用')
          }
        }).catch(error => {
          console.error('获取验证码失败:', error)
          // 移除弹框提示，静默处理失败
          // 获取失败时保持按钮可见，用户可以重试
          if (!this.codeUrl) {
            this.codeUrl = null // 保持按钮显示但不显示图片
          }
          // 保持 captchaEnabled 为 true，确保验证码区域仍然显示
          this.captchaEnabled = true
        })
      },
      
      // 密码登录方法
      async handleLogin() {
        if (this.loginForm.username === "") {
          this.$modal.msgError("请输入用户名")
        } else if (this.loginForm.password === "") {
          this.$modal.msgError("请输入密码")
        } else if (this.loginForm.code === "" && this.captchaEnabled) {
          this.$modal.msgError("请输入验证码")
        } else {
          this.$modal.loading("登录中，请耐心等待...")
          this.pwdLogin()
        }
      },
      
      // 密码登录
      async pwdLogin() {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        }).catch((error) => {
          // 关闭加载框
          this.$modal.closeLoading()
          // 显示错误信息
          this.$modal.msgError(error.msg || '登录失败，请检查用户名和密码')
          // 如果启用了验证码，重新获取验证码
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
      },
      
      // 登录成功后，处理函数
      loginSuccess(result) {
        this.$store.dispatch('GetInfo').then(res => {
          // 检查是否是新用户（这里假设后端返回 isNewUser 字段）
          //获取用户id
          //在缓存里取用户信息
          const userInfo = uni.getStorageSync('storage_data')
          // 添加创建时间字段
          if (res.data && res.data.createTime) {
            userInfo.createTime = res.data.createTime
          }
          uni.setStorageSync('storage_data', userInfo)
          const createTime = userInfo.createTime.substring(0, 10)
          console.log(createTime);
		  const nowTime = new Date().toISOString().substring(0,10)
		  console.log(nowTime)
		
          if (createTime == nowTime) {
            // 新用户跳转到引导页
            this.$tab.reLaunch('/pages/guide/index')
          } else {
            // 老用户直接进入首页
            this.$tab.reLaunch('/pages/index')
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    // 设置背景颜色为浅绿色
    background-color: #e0f2e0;
    height: 100vh;
    position: relative;
  }

  .login-container {
    position: relative;
    min-height: 100vh;
    padding: 0 40rpx;
    overflow: hidden;
    z-index: 1;
  }

  // 背景装饰 - 优化版本
  .bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    
    .bg-circle {
      position: absolute;
      border-radius: 50%;
      
      &.circle-1 {
        width: 200rpx;
        height: 200rpx;
        top: 8%;
        right: -50rpx;
        background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 70%, transparent 100%);
        animation: float 8s ease-in-out infinite;
      }
      
      &.circle-2 {
        width: 150rpx;
        height: 150rpx;
        bottom: 15%;
        left: -40rpx;
        background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 70%, transparent 100%);
        animation: float 10s ease-in-out infinite reverse;
      }
      
      &.circle-3 {
        width: 120rpx;
        height: 120rpx;
        top: 35%;
        left: 8%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: float 12s ease-in-out infinite;
      }
      
      &.circle-4 {
        width: 80rpx;
        height: 80rpx;
        top: 60%;
        right: 15%;
        background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
        animation: float 9s ease-in-out infinite reverse;
      }
    }
    
    // 医疗图标装饰 - 优化透明度
    .medical-icon {
      position: absolute;
      animation: float 6s ease-in-out infinite;
      
      &.icon-1 {
        top: 25%;
        right: 20%;
        animation-delay: -2s;
      }
      
      &.icon-2 {
        bottom: 30%;
        right: 10%;
        animation-delay: -4s;
      }
      
      &.icon-3 {
        top: 50%;
        left: 15%;
        animation-delay: -1s;
      }
    }
    
    // 几何图形装饰
    .geometric-shape {
      position: absolute;
      
      &.shape-1 {
        width: 60rpx;
        height: 60rpx;
        top: 20%;
        left: 10%;
        background: rgba(255,255,255,0.1);
        border-radius: 12rpx;
        transform: rotate(45deg);
        animation: float 8s ease-in-out infinite;
      }
      
      &.shape-2 {
        width: 40rpx;
        height: 40rpx;
        bottom: 25%;
        right: 25%;
        background: rgba(255,255,255,0.08);
        border-radius: 50%;
        animation: float 10s ease-in-out infinite reverse;
      }
      
      &.shape-3 {
        width: 50rpx;
        height: 50rpx;
        top: 45%;
        right: 8%;
        background: rgba(255,255,255,0.06);
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        animation: float 7s ease-in-out infinite;
      }
    }
  }

  // Logo区域 - 美化设计
  .logo-section {
    position: relative;
    z-index: 2;
    padding-top: 120rpx;
    text-align: center;
    
    .logo-wrapper {
      display: inline-block;
      
      .logo-bg {
        width: 140rpx;
        height: 140rpx;
        background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3rpx solid rgba(255, 255, 255, 0.3);
        box-shadow: 
          0 20rpx 40rpx rgba(0, 0, 0, 0.15),
          0 8rpx 16rpx rgba(0, 0, 0, 0.1),
          inset 0 2rpx 4rpx rgba(255, 255, 255, 0.8);
        position: relative;
        
        &::before {
          content: '';
          position: absolute;
          top: -6rpx;
          left: -6rpx;
          right: -6rpx;
          bottom: -6rpx;
          background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
          border-radius: 50%;
          z-index: -1;
        }
      }
    }
  }

  // 登录方式切换 - 美化设计
  .login-type-switch {
    position: relative;
    z-index: 2;
    margin-top: 80rpx;
    
    .switch-wrapper {
      display: flex;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 20rpx;
      padding: 6rpx;
      border: 1rpx solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(20rpx);
      box-shadow: 
        0 8rpx 32rpx rgba(0, 0, 0, 0.1),
        inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
      
      .switch-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24rpx 10rpx;
        border-radius: 16rpx;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        
        .switch-text {
          margin-left: 8rpx;
          font-size: 28rpx;
          color: #000;
          transition: all 0.3s ease;
          font-weight: 500;
        }
        
        &.active {
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
          box-shadow: 
            0 4rpx 16rpx rgba(0, 0, 0, 0.1),
            inset 0 1rpx 2rpx rgba(255, 255, 255, 0.4);
          
          .switch-text {
            color: #fff;
            font-weight: 600;
          }
        }
      }
    }
  }

  // 表单卡片 - 重新设计美化
  .form-card {
    position: relative;
    z-index: 2;
    margin-top: 50rpx;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 40rpx;
    box-shadow: 
      0 30rpx 80rpx rgba(0, 0, 0, 0.15),
      0 12rpx 32rpx rgba(0, 0, 0, 0.1),
      inset 0 2rpx 4rpx rgba(255, 255, 255, 0.8);
    border: 1rpx solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(30rpx);
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2rpx;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    }
    
    .form-content {
      padding: 60rpx 50rpx;
    }
  }

  // 微信登录内容 - 美化设计
  .wechat-login-content {
    padding: 80rpx 50rpx;
    text-align: center;
    
    .wechat-icon {
      margin-bottom: 50rpx;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 160rpx;
        height: 160rpx;
        background: radial-gradient(circle, rgba(26, 173, 25, 0.1) 0%, transparent 70%);
        border-radius: 50%;
        z-index: -1;
      }
    }
    
    .wechat-title {
      font-size: 40rpx;
      font-weight: 700;
      color: #333;
      margin-bottom: 24rpx;
      letter-spacing: 1rpx;
    }
    
    .wechat-desc {
      font-size: 30rpx;
      color: #666;
      margin-bottom: 80rpx;
      line-height: 1.5;
    }
    
    .wechat-btn-wrapper {
      .wechat-login-btn {
        width: 100%;
        height: 100rpx;
        background: linear-gradient(135deg, #1aad19 0%, #16a016 100%);
        border-radius: 50rpx;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 
          0 12rpx 32rpx rgba(26, 173, 25, 0.3),
          0 4rpx 12rpx rgba(26, 173, 25, 0.2);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
          transition: left 0.6s ease;
        }
        
        &:active {
          transform: translateY(2rpx);
          box-shadow: 
            0 8rpx 24rpx rgba(26, 173, 25, 0.3),
            0 2rpx 8rpx rgba(26, 173, 25, 0.2);
        }
        
        &.wechat-btn-hover::before {
          left: 100%;
        }
        
        .btn-text {
          color: #000;
          font-size: 32rpx;
          font-weight: 600;
          margin-left: 16rpx;
          letter-spacing: 1rpx;
        }
      }
    }
  }

  // 输入框组 - 美化设计
  .input-group {
    margin-bottom: 40rpx;
    
    .input-wrapper {
      position: relative;
      background: rgba(248, 249, 255, 0.8);
      border-radius: 20rpx;
      border: 2rpx solid rgba(102, 126, 234, 0.1);
      transition: all 0.3s ease;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1rpx;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
      }
      
      &:focus-within {
        border-color: rgba(102, 126, 234, 0.3);
        box-shadow: 
          0 8rpx 24rpx rgba(102, 126, 234, 0.1),
          0 0 0 4rpx rgba(102, 126, 234, 0.05);
        background: rgba(255, 255, 255, 0.9);
      }
      
      .input-icon {
        position: absolute;
        left: 30rpx;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
      }
      
      .form-input {
        width: 100%;
        height: 100rpx;
        padding: 0 30rpx 0 80rpx;
        font-size: 30rpx;
        color: #333;
        background: transparent;
        border: none;
        
        &.captcha-input {
          padding-right: 200rpx;
        }
      }
      
      .password-toggle {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        padding: 10rpx;
      }
      
      .captcha-code {
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 160rpx;
        height: 60rpx;
        border-radius: 12rpx;
        overflow: hidden;
        border: 1rpx solid rgba(102, 126, 234, 0.2);
        
        .captcha-img {
          width: 100%;
          height: 100%;
        }
        
        .captcha-placeholder {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(102, 126, 234, 0.1);
          color: #667eea;
          font-size: 24rpx;
        }

        &.disabled {
          color: #999;
          background: rgba(0, 0, 0, 0.05);
        }
      }
    }
  }

  // 登录按钮 - 美化设计
  .login-btn-wrapper {
    margin-top: 60rpx;
    
    .login-btn {
      width: 100%;
      height: 100rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50rpx;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 
        0 12rpx 32rpx rgba(102, 126, 234, 0.3),
        0 4rpx 12rpx rgba(102, 126, 234, 0.2);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
      }
      
      &:active {
        transform: translateY(2rpx);
        box-shadow: 
          0 8rpx 24rpx rgba(102, 126, 234, 0.3),
          0 2rpx 8rpx rgba(102, 126, 234, 0.2);
      }
      
      &.login-btn-hover::before {
        left: 100%;
      }
      
      .btn-text {
        color: #fff;
        font-size: 32rpx;
        font-weight: 600;
        letter-spacing: 2rpx;
      }
    }
  }

  // 表单底部 - 美化设计
  .form-footer {
    margin-top: 50rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .forgot-password {
      font-size: 28rpx;
      color: #667eea;
      font-weight: 500;
    }
    
    .register-section {
      display: flex;
      align-items: center;
      
      .register-text {
        font-size: 28rpx;
        color: #999;
      }
      
      .register-link {
        font-size: 28rpx;
        color: #667eea;
        font-weight: 600;
        margin-left: 8rpx;
      }
    }
  }

  // 协议条款 - 美化设计
  .agreement {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 60rpx;
    padding-bottom: 80rpx;
    
    .agreement-checkbox {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24rpx;
      
      .agreement-text {
        font-size: 26rpx;
        color: #000;
        margin-left: 12rpx;
        font-weight: 500;
      }
    }
    
    .agreement-links {
      .agreement-link {
        font-size: 26rpx;
        color: #000;
        text-decoration: underline;
        margin: 0 12rpx;
        font-weight: 500;
        
        &:hover {
          color: #000;
        }
      }
    }
  }

  // 动画优化
  @keyframes float {
    0%, 100% {
      transform: translateY(0px) rotate(0deg);
    }
    33% {
      transform: translateY(-10px) rotate(1deg);
    }
    66% {
      transform: translateY(-5px) rotate(-1deg);
    }
  }
</style>
